<template>
    <NavBar class="top" left-arrow @click-right="onClickRight" @click-left="onClickLeft">
        <template #right>
            {{ login }}
        </template>
        <template #left>
            {{ city }}
        </template>
        <template #title>
            <van-search @click="search" class="cha" background="rgb(97, 172, 233)" placeholder="请输入搜索关键词"
                shape="round" />
        </template>
    </NavBar>

</template>

<script setup lang="ts">
import { NavBar } from "vant";

import { useRouter } from 'vue-router'

import { ref, onMounted } from "vue";

const city = ref('城市')

const login = ref('登录')

const router = useRouter()

const search = () => {
    router.push('/search')
}

onMounted(() => {
    const token = localStorage.getItem('token')
    const userid = localStorage.getItem('userid')
    if (token && userid) {
        login.value = '我的'
    }

    if (localStorage.getItem('city') == null) {

    } else {
        city.value = localStorage.getItem('city') as string
    }


})

const onClickRight = () => {
    if (login.value == '登录') {
        router.push('/login')
    } else {
        router.push('/user')
    }
}

const onClickLeft = () => {
    router.push('/city')
}

</script>


<style scoped>
.top {
    background: rgb(97, 172, 233);
}

.cha {
    padding: 0;
}
</style>